<!DOCTYPE html>
<html>

<head>
    <title>loadmapsyncHTML</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style type='text/css'>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Segoe UI', Helvetica, Arial, Sans-Serif
        }
    </style>
</head>

<body>
    <div id='printoutPanel'></div>

    <div id='myMap' style='width: 100vw; height: 100vh;'></div>
    <script type='text/javascript'>
        function loadMapScenario() {



            //var map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), {credentials: 'Ar5UtU9buWbgt6ANfQd3mkDNhT_9ENwQ3Sr7i_FO11guCSmiF6beFlLpFsDiu8hn'});
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                zoom: 6,
            });
            var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
                draggable: true
            });
            map.entities.push(pushpin);


            //alert(pushpin.getLocation());

            Microsoft.Maps.Events.addHandler(pushpin, 'dragend', displayInfo);


            function displayInfo(e) {
                //若点击到地图的标记上，而非地图上
                var loc;
                if (e.targetType == "pushpin") {
                    loc = e.target.getLocation();
                }
                //若点击到地图上
                else {
                    var point = new Microsoft.Maps.Point(e.pageX, e.pageY);
                    loc = e.target.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);
                }
                console.log(loc.latitude + ", " + loc.longitude);


                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                    var searchManager = new Microsoft.Maps.Search.SearchManager(map);
                    searchManager.reverseGeocode({
                        location: new Microsoft.Maps.Location(loc.latitude, loc.longitude),
                        callback: function (answer, userData) {
                            // map.setView({
                            //     bounds: answer.bestView
                            // });
                            // map.entities.push(new Microsoft.Maps.Pushpin(
                            //     new Microsoft.Maps.Location(loc.latitude, loc.longitude)));
                            console.log(answer.address)

                        }
                    });
                });




            }




        }
    </script>
    <script type='text/javascript' src='https://cn.bing.com/api/maps/mapcontrol?key=Ar5UtU9buWbgt6ANfQd3mkDNhT_9ENwQ3Sr7i_FO11guCSmiF6beFlLpFsDiu8hn&callback=loadMapScenario&mkt=en-us'
        async defer></script>
</body>

</html>